<template>
  <view class="container">

    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form ref="uForm" :model="form" label-width="160rpx">
        <u-form-item label="收货人" prop="name">
          <u-input v-model="form.name" placeholder="请输入收货人姓名"/>
        </u-form-item>
        <u-form-item label="手机号码" prop="mobile">
          <u-input v-model="form.mobile" placeholder="请输入收货人手机号码"/>
        </u-form-item>
        <u-form-item label="所在地区" prop="region">
          <select-region v-if="(addressId!='' && defaultRegion.length>0 || addressId=='')" ref="sRegion" v-model="form.region" :defaultval="defaultRegion"/>
        </u-form-item>
        <view class="textarea-item">
          <u-form-item  :border-bottom="false" label="详细地址" prop="address">
            <textarea class="textarea" v-model="form.address" placeholder="街道门牌、楼层等信息"/>
          </u-form-item>
        </view>
        <view class="switch-item">
          <u-form-item label="设为默认收获地址" >
            <u-switch v-model="form.isDefault" ></u-switch>
          </u-form-item>
        </view>
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view :class="{ disabled }" class="btn-item btn-item-main" @click="handleSubmit()">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
import {isMobile} from '@/utils/verify'
 // import SelectRegion from './select-region/select-region'
// 表单字段元素
const form = {
  name: '',
  mobile: '',
  region: [],
  address: '',
  isDefault:false
}

// 表单验证规则
const rules = {
  name: [{
    required: true,
    message: '请输入姓名',
    trigger: ['blur', 'change']
  }],
  mobile: [{
    required: true,
    message: '请输入手机号',
    trigger: ['blur', 'change']
  }, {
    // 自定义验证函数
    validator: (rule, value, callback) => {
      // 返回true表示校验通过，返回false表示不通过
      return isMobile(value)
    },
    message: '手机号码不正确',
    // 触发器可以同时用blur和change
    trigger: ['blur'],
  }],
  region: [{
    required: true,
    message: '请选择省市区',
    trigger: ['blur', 'change'],
    type: 'array'
  }],
  address: [{
    required: true,
    message: '请输入详细地址',
    trigger: ['blur', 'change']
  }],
}

export default {
	// components: {
	//   SelectRegion
	// },
  data() {
    return {
      addressId:'',
      form,
      defaultRegion: [],
      rules,
      // 按钮禁用
      disabled: false
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if(options.addressId) {
      // 当前收货地址ID
      this.addressId = options.addressId
      // 获取当前记录详情
      this.getDetail()
      uni.setNavigationBarTitle({
        title: '修改收货地址'
      });
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  onUnload(){
    this.$refs.uForm.resetFields()
  },
  methods: {
    // 获取当前记录详情
    getDetail() {
      this.$request.get('wx/address/detail', {id:this.addressId}).then(({data}) => {
        // const detail = result.data
        const { form } = this
        form.name = data.name
        form.mobile = data.mobile
        form.address = data.address
        form.isDefault = data.isDefault
        this.defaultRegion = [data.provinceId,data.cityId,data.areaId]
      }).catch(err=>{
        this.$toast(err.errmsg)
      })
    },
    // 表单提交
    handleSubmit() {
      const app = this
      if (app.disabled) {
        return false
      }
      app.$refs.uForm.validate().then(res => {
        app.disabled = true
        app.form['provinceId']= app.form.region[0].id;
        app.form['cityId']= app.form.region[1].id;
        app.form['areaId']= app.form.region[2].id;
        delete app.form.region
        if(app.addressId!=''){
          app.form['id']=app.addressId
        }
        this.$request.post('wx/address/save',app.form).then(result => {
          app.$toast(result.errmsg)
          uni.navigateBack()
        }).catch(err=>{
          app.$toast(err.errmsg)
        })
      }).catch(err => {
        console.log(err)
      }).finally(() => app.disabled = false)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #fff;

  .form-wrapper {
    margin: 20rpx auto 20rpx auto;
    padding: 0 32rpx;
    width: 100%;
    box-sizing: border-box;


    /deep/ .u-form-item__body__left__content__label{
      font-size: 32rpx;
      font-weight: bold;
      color: #242323;
    }
    /deep/ .u-input{
      background: #F2F2F2;
      border-radius: 16rpx;
      padding: 20rpx 32rpx !important;
      font-size: 32rpx;
      font-weight: 500;
      color: #242323;
      border-width: 0 !important;
    }
    /deep/ .textarea-item .u-form-item__body__left{
      align-items: flex-start;
      margin-top: 20rpx;
    }
    /deep/ .switch-item .u-form-item__body{
      justify-content: space-between;
    }
    /deep/ .switch-item .u-form-item__body__left{
      width: auto !important;
    }
    /deep/ .switch-item .u-form-item__body__right{
      flex: unset;
    }
    /deep/ .textarea{
      width: 100%;
      box-sizing: border-box;
      height: 200rpx;
      background: #F2F2F2;
      border-radius: 16rpx;
      padding: 32rpx !important;
      font-size: 32rpx;
      font-weight: 500;
      color: #242323;
    }
  }
}


// 底部操作栏
.footer {
  margin-top: 80rpx;

  .btn-wrapper {
    height: 100%;
    // display: flex;
    // align-items: center;
    padding: 0 40rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 86rpx;
    color: #fff;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-item-wechat {
    background: #0ba90b;
    margin-bottom: 26rpx;
  }

  .btn-item-main {
    background: #1777FF;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 10rpx;
    // 禁用按钮
    &.disabled {
      opacity: 0.6;
    }
  }

}
</style>
